<template>
  <div class="edit-down-modal">
    <el-input class="edit-down-input" readonly v-model="row[column.field]" :title="row[column.field]" @click="popupEvent" />
    <el-link class="edit-popup-button" type="primary" :underline="false" @click="popupEvent">
      获取
    </el-link>
    <el-drawer
      v-model="modalVisible"
      direction="rtl"
      size="800"
      :append-to-body="true"
    >
      <template #header>
        <h4>{{ `设置【 ${row.code} 】的值` }}</h4>
      </template>
      <template #default>
        <div class="drawer-body-lock">
          <div class="header"><el-button type="primary" @click="addData">增加参数</el-button></div>
          <div class="drawertable-content">
            <vxe-table
              class="drawer-table"
              ref="xTableRef"
              height="auto"
              :data="valueDatas"
              show-overflow
              highlight-hover-row
              :auto-resize="true"
              :keep-source="true"
              :mouse-config="{ selected: false }"
              :keyboard-config="{ isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true }"
            >
              <vxe-table-column type="seq" title="参数" align="center" width="60"></vxe-table-column>
              <vxe-table-column field="value" title="值" :edit-render="{ name: 'TypingValueDownModalabb', abb: params }" />
              <vxe-table-column title="操作" width="100">
                <template v-slot="{ row }">
                  <el-link type="danger" :underline="false" title="删除" @click="cutoffdata(row)">
                    <el-icon><Delete /></el-icon>
                  </el-link>
                </template>
              </vxe-table-column>
            </vxe-table>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button plain @click="modalVisible = false">取 消</el-button>
          <el-button :loading="loading" type="primary" @click="confirmEvent">确 定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
import { VxeGlobalRendererHandles } from "vxe-pc-ui";
import { VxeTableDefines } from "vxe-table";
import { RecordTypeEnum } from "@@/constants/other-keys";
import { ElMessageBox } from "element-plus";
import { BasicClassValueField } from "@@/apis/basic-data/types";
import "./TypingValueDownModalabb"

interface Props {
  params: VxeGlobalRendererHandles.RenderTableEditParams
}
const props = defineProps<Props>()
const isLazy = ref<boolean>(false)
const loading = ref<boolean>(false)
const row = ref<BasicClassValueField>(props.params.row)
const column = ref<VxeTableDefines.ColumnInfo>(props.params.column)
const modalVisible = ref<boolean>(false)
const valueDatas = ref([])
const xTableRef = ref();

function load() {
  if (row.value[column.value.field]) {
    isLazy.value = false;
    setTimeout(() => {
      xTableRef.value.loadData(JSON.parse(row.value[column.value.field]));
    }, 300);
  }
}

function popupEvent() {
  modalVisible.value = true;
  load();
}
function confirmEvent() {
  loading.value = true
  let { tableData } = xTableRef.value.getTableData();
  row.value[column.value.field] = JSON.stringify(tableData)
  loading.value = false
  modalVisible.value = false
}
async function addData() {
  let record = {
    code: row.value.code,
    typeId: row.value.typeId,
    typeCode: row.value.typeCode,
    establish: true,
    recordType: RecordTypeEnum.Array
  };
  const { row: fieldRow } = await xTableRef.value.insertAt(record, -1);
  await xTableRef.value.setActiveCell(fieldRow, 'code');

}
function cutoffdata(item: BasicClassValueField) {
  ElMessageBox.confirm(`是否确认删除？`, "提示", {
    customClass: "drawer-message-box",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    await xTableRef.value.remove(item)
  })
}
</script>

<style lang="scss" scoped>
.drawertable-content {
  height: calc(100vh - 350px);
}

.edit-down-modal {
  display: flex;
  align-items: center;
}

.header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>
